<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  To change this template use File | Settings | File Templates.
--%>
<html>
<head>
    <title>ajax_learning</title>
    <script type="text/javascript">
        function createXMLHttpRequest(){//  创建异步对象
            try {
                return new XMLHttpRequest();
            }catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                }catch (e) {
                    try {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    }catch (e) {
                        alert("error!!!!!!!!!!!!!!");
                    }
                }
            }
        }
        window.onload = function () {
            var userElem = document.getElementById("usernameElem");
            userElem.onblur = function(){
                var xmlHttp = createXMLHttpRequest();
                xmlHttp.open("post","<c:url value="/validateUsernameServlet"/>", true);
                xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xmlHttp.send("username="+userElem.value);
                xmlHttp.onreadystatechange = function(){
                    if(xmlHttp.readyState===4 && xmlHttp.status===200){
                        var text = xmlHttp.responseText;
                        var span = document.getElementById("errorSpan");
                        if(text === "1"){
                            span.innerText = "用户名已存在";
                        }else{
                            span.innerText = "";
                        }
                    }
                }
            }
        }

    </script>
</head>
<body>
    <h1>用户名是否存在：？</h1>
    <form action="" method="post">
        username:&nbsp;<input type="text" name="username" id="usernameElem" placeholder="username"><span id="errorSpan" style="color: red"></span>
        <br />
        password:&nbsp;<input type="password" name="password" id="pwd" placeholder="password">
        <br>
        <input type="submit" value="submit">
    </form>
</body>
</html>
